<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
        <title>Cindy JS</title>
        <script type="text/javascript" src="../build/js/Cindy.js"></script>
        <link rel="stylesheet" href="../css/cindy.css">
    </head>

	<body style="font-family:Arial;">

        <h1>CindyJS: A simple sunflower</h1>

        <script id='init' type='text/x-cindyscript'>
            pts=allpoints();
            forall(pts,p,p.xy=(-1000,-1000));
            n=3;
            m=8;
            aufg=(10,9);
            i=1;
            posx=0;
            posy=0;
            repeat(aufg_1,
              (pts_i).xy=(posx,posy)+(0.5,0.5);
              posy=posy+1;
              if(posy==3,posy=0;posx=posx+1);
              i=i+1;
            );

            posx=0;
            posy=-5;
            repeat(aufg_2,
              (pts_i).xy=(posx,posy)+(0.5,0.5);
              posy=posy+1;
              if(posy==-2,posy=-5;posx=posx+1);
              i=i+1;
            )


        </script>

        <script id='csmove' type='text/x-cindyscript'>

            pts=allpoints();
            square(i,j):=[(i,j),(i,j+1),(i+1,j+1),(i+1,j)];

            forall(0..(m-1),i,
               forall(0..(n-1),j,
                  fillpolygon(square(i,j),color->(1,.9,0),alpha->0.2);
                  drawpolygon(square(i,j),color->(0,0,0));
               );
            );


             forall(0..(m-1),i,
               forall(0..(n-1),j,
                  fillpolygon(square(i,j-5),color->(1,.9,0),alpha->0.2);
                  drawpolygon(square(i,j-5),color->(0,0,0));
               );
            );

            oberesfeld(i,j):=(i>0 & i<m & j>0 & j<n);
            hot=select(pts,p,oberesfeld(p.x,p.y));
            forall(hot,drawcircle(#,.4));
            bruch1=length(hot);
            bruch2=m*n;

            ggt(x,y):=if(y==0,x,
                ggt(y,mod(x,y));
            );
            ggt=ggt(bruch1,bruch2);

            drawtext((9,2),bruch1/ggt,size->30);
            drawtext((9,1),bruch2/ggt,size->30);
            draw((8.7,1.7),(10,1.7),size->4,color->(0,0,0));


            </script>



        <div  id="CSCanvas" style="width:700px; height:500px; border:2px solid #000000"></div>

        <script type="text/javascript">

            gslp=[];
            for(var i=0;i<100;i++) {
              gslp.push({name:"A"+i, kind:"P", type:"Free", pos:[i*.5,0,1]});

            };



            CindyJS({canvasname:"CSCanvas",
                        defaultAppearance: {pointColor: [1,0.7,0]},
                        movescript:"csmove",
                        initscript:"init",
                        geometry:gslp,
                        transform:[{scale:2},{translate:[-4,1]}],

                    });





            </script>



	</body>
</html>
